import * as React from "react";
import ListSubheader from "@mui/material/ListSubheader";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import CloudDownloadIcon from "@mui/icons-material/CloudDownload";
import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
import DoneIcon from "@mui/icons-material/Done";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";

import brandWhite from "../../assets/images/logo.png";
import brandDark from "../../assets/images/logo-dark.png";
import { Link } from "@mui/material";
import { useContext } from "react";

import { useGlobalVariablesController } from "../../context/GlobalContext";

const sideBarBackGroundStyle = {
  background: "#4b545c",
};

const sideBarBoxBackGroundStyle = {
  height: "100%",
  background: "#4b545c",
};

export default function SidebarList() {
  const [controller] = useGlobalVariablesController();
  const { aria2GetGlobalStat } = controller;

  let downloading = "正在下载";
  if (aria2GetGlobalStat && aria2GetGlobalStat.numActive >= 0) {
    //console.log(aria2GetGlobalStat.numActive);
    downloading += "(" + aria2GetGlobalStat.numActive + ")";
  }
  return (
    <Drawer
      variant="permanent"
      sx={{
        width: 240,
        flexShrink: 1,
        [`& .MuiDrawer-paper`]: { width: 240, boxSizing: "border-box" },
      }}
    >
      <AppBar
        position="fixed"
        sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}
        style={sideBarBackGroundStyle}
      >
        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            <Box component="img" src={brandWhite} alt="Brand" width="2rem" />
            aria2cp
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar />
      <Box sx={{ overflow: "auto" }} style={sideBarBoxBackGroundStyle}>
        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
            <ListSubheader
              component="div"
              id="nested-list-subheader"
              style={sideBarBackGroundStyle}
            >
              下载
            </ListSubheader>
          }
        >
          <Link href="/">
            <ListItem>
              <ListItemIcon>
                <CloudDownloadIcon />
              </ListItemIcon>
              <ListItemText primary={downloading} />
            </ListItem>
          </Link>
          <Link href="/about">
            <ListItem>
              <ListItemIcon>
                <HourglassEmptyIcon />
              </ListItemIcon>
              <ListItemText primary="正在等待" />
            </ListItem>
          </Link>
          <ListItem>
            <ListItemIcon>
              <DoneIcon />
            </ListItemIcon>
            <ListItemText primary="已完成" />
          </ListItem>
        </List>
      </Box>
    </Drawer>
  );
}
